class Compute {
    plus(a, b) {
        return a + b;
    }
    minus(a, b) {
        return a - b;
    }
    mul(a, b) {
        return a * b;
    }
    div(a, b) {
        return a / b;
    }
}
//继承Compute类
class Calculator extends Compute {
    constructor(doc) {
        super();
        const oCal = doc.getElementsByClassName('J_calculator')[0]; 
        this.fInput = oCal.getElementsByTagName('input')[0];
        this.sInput = oCal.getElementsByTagName('input')[1];
        this.oBtnGroup = oCal.getElementsByClassName('btn-group')[0];
        this.oBtnItems = this.oBtnGroup.getElementsByTagName('button');
        this.oResult = oCal.getElementsByClassName('result')[0];
        this.data = this.defineData();
        this.btnIdx = 0;
    }
    init() {
        this.bindEvent();
    }
    bindEvent() {
        this.oBtnGroup.addEventListener('click', this.onFieldBtnClick.bind(this), false);
        this.fInput.addEventListener('input', this.onNumberInput.bind(this), false);
        this.sInput.addEventListener('input', this.onNumberInput.bind(this), false);
    }

    defineData() {
        let _obj = {},
            fNumber = 0,
            sNumber = 0,
            field = 'plus';
        const _self = this;
        Object.defineProperties(_obj, {
            fNumber: {
                get() {
                    return fNumber;
                },
                set(newVal) {
                    console.log('fNumber', newVal)
                    fNumber = newVal;
                    _self.computeResult(fNumber, sNumber, field);
                }
            },
            sNumber: {
                get() {
                    return sNumber;
                },
                set(newVal) {
                    console.log('sNumber', newVal)
                    sNumber = newVal;
                    _self.computeResult(fNumber, sNumber, field);
                }
            },
            field: {
                get() {
                    return field;
                },
                set(newVal) {
                    console.log('field', newVal)
                    field = newVal;
                    _self.computeResult(fNumber, sNumber, field);
                }

            }
        })
        return _obj;
    }
    computeResult(fNumber, sNumber, field) {
        console.log('field', field)
        this.oResult.innerText = this[field](fNumber, sNumber);
    }
    //点击 + - * / 按钮
    onFieldBtnClick(ev) {
        const e = ev || window.event,
            tar = e.target || e.srcElement,
            tagName = tar.tagName.toLowerCase();
        console.log(tagName)
        tagName === 'button' && this.fieldUpdate(tar); 
    }
    //获取当前点击的 + - * /按钮类型
    fieldUpdate(target) {
        this.oBtnItems[this.btnIdx].className = '';
        this.btnIdx = [].indexOf.call(this.oBtnItems, target);
        target.className += ' current';
        this.data.field = target.getAttribute('data-field');
    }

    onNumberInput(ev) {
        const e = ev || window.event,
            tar = e.target || window.srcElement,
            className = tar.className,
            //‘\s’表示正则匹配字符串中的空字符，‘g’表示全部匹配
            val = Number(tar.value.replace(/\s+/g, '')) || 0; //替换字符串中所有的空字符串
        switch (className) {
            case 'f-input':
                this.data.fNumber = val;
                break;
            case 's-input':
                this.data.sNumber = val;
                break;
            default:
                break;
        }
    }

}
new Calculator(document).init();